<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>预警设置</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>

    <style>
        * {font-family: "Microsoft Yahei" !important;overflow-y: hidden;}
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
            margin-right: 22px;
        }
        nav div{
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }

        .search{
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }
        .allBtn{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border: none;
            background: #fafbfc;
        }
        .screen{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }
        .one{
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        .layui-table-tool-self {
            display: none;
        }
        .eui-input-group-addon {
            padding: .5rem .75rem;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: normal;
            line-height: 1.25;
            color: #55595c;
            text-align: center;
            background-color: #eceeef;
            border: 1px solid rgba(0,0,0,0.15);
            border-radius: .25rem;
            width: 1%;
            white-space: nowrap;
            vertical-align: middle;
            display: inline-table;
        }
        .layui-form-label {
            width: 100px;
        }
    </style>
</head>
<body>
<nav>
    <div style="float: left !important;">预警设置</div>
    <button type="button" setType="" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn">全部</button>
    <button type="button" setType="2" class="layui-btn layui-btn-primary layui-btn-sm allBtn  classBtn">部门</button>
    <button type="button" setType="3" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">用户</button>
<%--    <button type="button" setType="1" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">公司</button>
    <div style="display: none;border-bottom: 1px solid #ccc;margin-top: 4px;margin-left: 50px; float: left">
        <input type="text" class="search" placeholder="搜索部门"/>
        <span style="padding: 5px;color: #999;cursor: pointer;">
            <i class="layui-icon layui-icon-group"></i>
        </span>
    </div>--%>
    <button type="button" onclick="enidOrInsert('添加费用设置')" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;margin-right: 25px" >新建</button>
</nav>
<table id="demo" lay-filter="test"></table>
</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
    </div>
</script>
<script>
    $('.content').height($(document.body).height()-50);
    $('.classBtn').click(function () {
        var index = $('.classBtn').index(this);
        if(index==1){
            $('.search').parent().show();
            $('.search').attr('placeholder','搜索部门').siblings().children().attr('class','layui-icon layui-icon-group');
        }else if(index==2){
            $('.search').parent().show();
            $('.search').attr('placeholder','搜索用户').siblings().children().attr('class','layui-icon layui-icon-friends');
        }else if(index==3){
            $('.search').parent().hide();
        }else if(index==4){
            $('.search').parent().show();
            $('.search').attr('placeholder','选择项目').siblings().children().attr('class','layui-icon layui-icon-tabs');
        }else if(index==0){
            $('.search').parent().hide();
        }
        $('.content:eq("'+index+'")').css('display','block').siblings('.content').css('display','none');
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");

        //重新加载表格  1公司，2部门，3用户
        var setType=$('.one').attr('setType');
        table.reload('demo',{
            where:{
                setType:setType
            }
        });

    });
    var form,layer,layedit,laydate,table;


    //清空搜索属性
    function EmptyAttr() {

        //移除部门属性
        $('input[name="inputSearch"]').removeAttr('deptname');
        $('input[name="inputSearch"]').removeAttr('deptid');

        //移除角色属性
        $('input[name="inputSearch"]').removeAttr('privid');
        $('input[name="inputSearch"]').removeAttr('userpriv');

        //移除用户
        $('input[name="inputSearch"]').removeAttr('username');
        $('input[name="inputSearch"]').removeAttr('dataid');
        $('input[name="inputSearch"]').removeAttr('user_id');
        $('input[name="inputSearch"]').removeAttr('userprivname');

        //清空
        $('input[name="inputSearch"]').val('');

    }

    function EmptyAttrTime() {
        $('#date1').val('');
        $('#date2').val('');
    }


    function enidOrInsert(title,obj){
        layer.open({
            type: 1,
            isOutAnim:true,
            area:['90%','90%'],
            title:title,
            btnAlign: 'c',
            btn: ['保存', '关闭'],
            content: '<form class="layui-form"  lay-filter="formTest" action="" style="margin: 2%;">' +
                '<input type="text" name="settingId" style="display: none;" >' +

                '  <div class="layui-form-item" name="setType1" style="display: block;">\n' +
                '    <label class="layui-form-label">预警对象：</label>\n' +
                '    <div class="layui-input-block" name="setType2">\n' +
                '      <input type="radio" name="setType" lay-filter="setType" value="2" title="部门" checked="">\n' +
                '      <input type="radio" name="setType" lay-filter="setType" value="4" title="角色" >\n' +
                '      <input type="radio" name="setType" lay-filter="setType" value="3" title="用户" >\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item" name="selectdept" style="display: block;">\n' +
                '   <div class="layui-input-block">\n' +
                '     <div style="border-bottom: 1px solid #ccc;margin-top: 4px;margin-left: 50px; width: 223px; ">\n' +
                '        <input type="text" id="inputSearch" name="inputSearch" class="search" placeholder="搜索部门" />\n' +
                '        <span id="spanSearch" inputSearch="2" style="padding: 5px;color: #999;cursor: pointer;">\n' +
                '            <i class="layui-icon layui-icon-group"></i>\n' +
                '        </span>\n' +
                '     </div>' +
                '    </div>' +
                ' </div>' +

                '  <div class="layui-form-item"  name="setType2" style="display: none;">\n' +
                '    <label class="layui-form-label">预警对象：</label>\n' +
                '    <div class="layui-input-block">\n' +
                '    <label class="layui-form-label" name="setType2Name"></label>\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item">\n' +
                '    <label class="layui-form-label">预警方式：</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <input type="radio" name="alertMethod" lay-filter="alertMethod" value="1" title="年" checked="">\n' +
                '      <input type="radio" name="alertMethod" lay-filter="alertMethod" value="2" title="季度">\n' +
                '      <input type="radio" name="alertMethod" lay-filter="alertMethod" value="3" title="月">\n' +
                '      <input type="radio" name="alertMethod" lay-filter="alertMethod" value="4" title="自定义预设周期">\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item" name="alertData" style="display: none;">\n' +
                '    <label class="layui-form-label">预警周期：</label>\n' +
                '    <div class="layui-input-block">\n' +

                '    <div class="layui-inline">\n' +
                '      <label class="layui-form-label">开始日期</label>\n' +
                '      <div class="layui-input-inline">\n' +
                '        <input type="text" name="date" id="date1" placeholder="预警周期必填" class="layui-input">\n' +
                '      </div>\n' +
                '    </div>\n' +

                '    <div class="layui-inline">\n' +
                '      <label class="layui-form-label">结束日期</label>\n' +
                '      <div class="layui-input-inline">\n' +
                '        <input type="text" name="date" id="date2" placeholder="预警周期必填" class="layui-input">\n' +
                '      </div>\n' +
                '    </div>\n' +

                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item" pane="">\n' +
                '    <label class="layui-form-label">预设金额类型：</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <input type="radio" name="alertType" lay-filter="alertType" value="1" title="总值" checked="">\n' +
                '      <input type="radio" name="alertType" lay-filter="alertType" value="2" title="按科目设置">\n' +
                '    </div>\n' +
                '  </div>' +

                '  <div class="layui-form-item" name="divAlertValue">\n' +
                '    <label class="layui-form-label">预警金额：</label>\n' +
                '    <div class="layui-input-block">\n' +
                '      <input type="text" name="alertValue" lay-verify="alertValue" autocomplete="off" placeholder="请输入数字" class="layui-input" style="display: inline; width: 95%">\n' +
                '       <span class="eui-input-group-addon">元</span>' +
                '    </div>' +
                '</div>' +

                '<div id="chargeType" style="display: none;">' +
                '</div>'+

                '</form>',
            success: function(layero, index){

                //按科目设置
                $.ajax({
                    type : "get",
                    url : "/chargeType/selectChargeType",
                    data:{type:true},
                    dataType:'json',
                    async: false,
                    success : function(res) {
                        if(res.flag){
                            var data=res.obj;
                            for (var i in data){
                                var str='<div class="layui-form-item">' +
                                    '<label class="layui-form-label" style="height: 55px;">'+data[i].chargeTypeName+'</label>';
                                var childList=data[i].childList;
                                for (var j in childList){
                                    str+='<div class="layui-input-inline">' +
                                        '   <span>'+childList[j].chargeTypeName+'</span>' +
                                        '   <input type="text" lay-verify="alertValue" chargeTypeName="'+childList[j].chargeTypeName+'" chargeTypeId="'+childList[j].chargeTypeId+'" placeholder="请输入" class="layui-input">' +
                                        '</div>';
                                }
                                str+='</div>';
                                $('#chargeType').append(str);
                            }
                        }
                    }
                });


                //判断是否需要回显
                if (obj!=undefined){
                    var data = obj.data;
                    $.get('/chargeSetting/findSetingById',{settingId:data.settingId},function (res) {
                        if (res.flag){
                            var object=res.object;
                            $('input[name="settingId"]').val(object.settingId);

                            form.val("formTest", {
                                'setType':object.setType,
                                'alertMethod':object.alertMethod,
                                'alertType':object.alertType,
                            })

                            //判断预警方式
                            if (object.alertMethod=='4'){
                                $('div[name="alertData"]').css('display','block');
                            }

                            //预设金额类型
                            if (object.alertType=='2'){
                                $('div[name="divAlertValue"]').css('display','none');
                                $('#chargeType').css('display','block');
                            }

                                $('div[name="setType1"]').css('display','none');
                                $('div[name="selectdept"]').css('display','none');
                                $('div[name="setType2"]').css('display','block');
                            if (object.setType=='2'){
                                $('input[name="inputSearch"]').val(object.deptName);
                                $('input[name="inputSearch"]').attr('deptname',object.deptName);
                                $('input[name="inputSearch"]').attr('deptid',object.deptId);
                                $('label[name="setType2Name"]').text('部门');
                            }else if(object.setType=='4'){
                                $('input[name="inputSearch"]').val(object.privName);
                                $('input[name="inputSearch"]').attr("privid",object.privId);
                                $('input[name="inputSearch"]').attr('userpriv',object.privId);
                                $('label[name="setType2Name"]').text('角色');
                            }else if (object.setType=='3'){
                                $('input[name="inputSearch"]').val(object.userName);
                                $('input[name="inputSearch"]').attr('user_id',object.userId);
                                $('input[name="inputSearch"]').attr('username',object.userName);
                                $('label[name="setType2Name"]').text('用户');
                            }

                            //预警金额
                            $('input[name="alertValue"]').val(object.alertValue);
                            //时间
                            $('#date1').val(object.alertDataStart);
                            $('#date2').val(object.alertDataEnd);


                            //按科目设置回显
                            var tlist=object.tlist;
                            for (var i in tlist){
                                var chargeTypeId=tlist[i].chargeTypeId;
                                var chargeTypeValue=tlist[i].chargeTypeValue;
                                $('input[chargeTypeId="'+chargeTypeId+'"]').val(chargeTypeValue);
                            }
                        }
                     });
                }

                //搜索
                $('#spanSearch').click(function () {
                    var isSearch = $(this).attr('inputSearch');
                    if (isSearch == '2') {
                        //部门
                        dept_id = 'inputSearch';
                        $.popWindow("../../common/selectDept?0");
                    }else if(isSearch==='4'){
                        //角色
                        priv_id = 'inputSearch';
                        $.popWindow("../../common/selectPriv?0");
                    }else if(isSearch==='3'){
                        //用户
                        user_id = 'inputSearch';
                        $.popWindow("../../common/selectUser?0");
                    }
                });

                //预警对象
                form.on('radio(setType)', function(data){
                    var value=data.value;
                    if (value==2){
                        //部门
                        $('div[name="selectdept"]').css('display','block');
                        $('input[name="inputSearch"]').attr('placeholder','搜索部门');
                        //添加标识
                        $('#spanSearch').attr('inputSearch','2');

                    }else if(value==3){
                        //用户
                        $('div[name="selectdept"]').css('display','block');
                        $('input[name="inputSearch"]').attr('placeholder','搜索用户');
                        $('#spanSearch').attr('inputSearch','3');

                    }else if (value==4){
                        //角色
                        $('div[name="selectdept"]').css('display','block');
                        $('input[name="inputSearch"]').attr('placeholder','搜索角色');
                        $('#spanSearch').attr('inputSearch','4');

                    }else{
                        //公司
                        $('div[name="selectdept"]').css('display','none');
                        $('#spanSearch').attr('inputSearch','1');
                    }

                    //清空
                    EmptyAttr();
                });
                //预警方式
                form.on('radio(alertMethod)', function(data){
                    if (data.value==4){
                        //自定义周期
                        $('div[name="alertData"]').css('display','block');
                    }else{
                        $('div[name="alertData"]').css('display','none');
                    }
                    EmptyAttrTime();
                });
                //预设金额类型
                form.on('radio(alertType)', function(data){
                    if (data.value==2){
                        //总值
                        $('div[name="divAlertValue"]').css('display','none');
                        $('#chargeType').css('display','block');
                    }else{
                        $('div[name="divAlertValue"]').css('display','block');
                        $('#chargeType').css('display','none');
                    }
                    $('input[lay-verify="alertValue"]').val('');
                });

                //日期
                laydate.render({
                    elem: '#date1'
                });
                laydate.render({
                    elem: '#date2'
                });
                form.render();
            },
            yes: function(index, layero){
                var settingId=$('input[name="settingId"]').val();

                //预警对象
                var setType=$('input[name="setType"]:checked').val();
                //预警方式
                var alertMethod=$('input[name="alertMethod"]:checked').val();
                //开始时间
                var data1=$('#date1').val();
                var data2=$('#date2').val();
                //预设金额类型
                var alertType=$('input[name="alertType"]:checked').val();
                //预警金额
                var alertValue=$('input[name="alertValue"]').val();

                //选择
                var inputSearch  =$('input[name="inputSearch"]').val();
                if (inputSearch==undefined || inputSearch==''){
                    layer.msg('请检查预警对象不能为空');
                    return false;
                }
                var userId,userName,deptId,deptName,privId;
                if(setType=='2'){
                    //部门
                    deptId= $('input[name="inputSearch"]').attr('deptid');
                    deptName= $('input[name="inputSearch"]').attr('deptname');
                }else if(setType=='4'){
                    //角色
                    privId=$('input[name="inputSearch"]').attr('userpriv');
                }else if(setType=='3'){
                    //用户
                    userId= $('input[name="inputSearch"]').attr('user_id');
                    userName= $('input[name="inputSearch"]').attr('username');
                }

                var jsonstr=[];
                $('#chargeType input').each(function(index,item){
                    jsonstr.push({
                        chargeTypeId:$(item).attr('chargeTypeId'),
                        chargeTypeName:$(item).attr('chargeTypeName'),
                        chargeTypeValue:$(item).val(),
                    });
                });

                var data={
                    settingId:settingId,
                    setType:setType,
                    alertMethod:alertMethod,
                    alertDataStart:data1,
                    alertDataEnd:data2,
                    alertType:alertType,
                    alertValue:alertValue,
                    userId:userId,
                    userName:userName,
                    deptId:deptId,
                    deptName:deptName,
                    privId:privId,
                    strJson:JSON.stringify(jsonstr),
                };

                $.post('/chargeSetting/enidOrInsertSeting',data,function (res) {
                    if (res.flag){
                        layer.msg('操作成功');
                        layer.close(index);
                        //重新加载表格  1公司，2部门，3用户
                        var setType=$('.one').attr('setType');
                        table.reload('demo',{
                            where:{
                                setType:setType
                            }
                        });
                    }
                });

            },
            btn2: function(index, layero){
                layer.close(index);
            }
        });
    }

    layui.use(['form','layer', 'layedit', 'laydate','table'], function(){
        form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table = layui.table;


        table.render({
            elem: '#demo'
            ,url: '/chargeSetting/findSetingAll' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'setType', title: '预警对象',templet: function (d) {

                        var setType=d.setType;
                        if (setType=='1'){
                            return '公司';
                        }else if(setType=='2'){
                            return '部门-'+d.deptName;
                        }else if(setType=='3'){
                            return '用户-'+d.userName;
                        }
                        return '';
                    }}
                ,{field: 'alertMethod', title: '预警方式',templet: function (d) {
                        var setType=d.alertMethod;
                        if (setType=='1'){
                            return '年';
                        }else if(setType=='2'){
                            return '季度';
                        }else if(setType=='3'){
                            return '月';
                        }else if(setType=='4'){
                            return '自定义周期';
                        }
                        return '';
                    }}
                ,{field: 'alertType', title: '预设金额类型',templet: function (d) {
                        var setType=d.alertType;
                        if (setType=='1'){
                            return '总值';
                        }else if(setType=='2'){
                            return '按科目设置';
                        }
                        return '';
                    }}
                ,{field: 'alertValue', title: '总值(元)'}
                ,{field: 'experience', title: '操作',toolbar: '#barDemo'}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.totleNum, //解析数据长度
                    "data": res.obj //解析数据列表
                };
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus('demo'); //获取选中行状态
            var data = checkStatus.data;  //获取选中行数据
            if (data.length==0){
                layer.msg('最少选中一项!');
                return false;
            };
            switch(obj.event){
                case 'getCheckData':
                    var ids ='';
                    for(var i in data){
                        ids+=data[i].settingId+',';
                    }
                    $.post('/chargeSetting/delSeting',{settingIds:ids},function (res) {
                        if (res.flag){
                            layer.msg('删除成功！');

                            //重新加载表格  1公司，2部门，3用户
                            var setType=$('.one').attr('setType');
                            table.reload('demo',{
                                where:{
                                    setType:setType
                                }
                            });
                        }
                    });
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认要删除吗？', function(index){
                    $.post('/chargeSetting/delSeting',{settingIds:data.settingId},function (res) {
                        if (res.flag){
                            obj.del();
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                enidOrInsert('编辑费用设置',obj);
            }
        });
    });

</script>

</html>
